$(function () {
  $('.mask').css('background', 'background: rgba(0, 0, 0, .7)').show();
  let loadImgs = $('img[load-src]');
  downAndCache = 0;

  function progressAni(i) {
    downAndCache += i;
    let progreVal = Math.ceil(downAndCache / loadImgs.length * 100);

    $('.percent').animate({
      count: progreVal
    }, {
      duration: 100,
      step: function () {
        if (isNaN(this.count)) {
          this.count = 0;
          return;
        }
        let numberTxt = Math.ceil(Number(this.count));
        if (numberTxt >= 100) {
          $('.load-wrapper').fadeOut();
          $('.main').css('opacity', 1)
          if (numberTxt == 100)
            $('.mask').css('background', 'background: rgba(0, 0, 0, .3)').hide();
          numberTxt = 100
        }
        $('.percent').text(numberTxt + '%');
        $('.load-on').css('width', numberTxt + '%');
      }
    });
  }

  loadImgs.each(function (a) {
    let Img = $(this);
    if (Img[0].complete) {
      // 用于缓存图片
      progressAni(1);
    }
    Img.attr('src', Img.attr('load-src'))

    Img.load(() => {
      // 用于新加载的图片
      progressAni(1);
    });
    Img.error(function () {
      // 图片加载失败，可以选择替换图片
      console.log(Img.attr('src'));
    });
  });
});